<template>
    <div class="warpper-box">
      <div class="inner_box">
       <form-create 
       v-model="params.fApi" 
       :rule="params.rule" 
       :option="params.option" 
       @btn-search-click="loadList(true)" 
       @btn-add-click="add(true)" 
       @btn-reset-click="reset"/>
      <labour-list
       :key="keys"
       :tableData="tables.tableData" 
       :tableLabel="tables.tableLabel" 
       :models="tables" 
       @on-search-click="loadList"
       @on-edit-click="add"
       @on-del-click="del"
       />
       <el-dialog :title="form.title" :visible.sync="form.visible" :width="form.width" :close-on-click-modal="false">
        <form-create 
        v-model="form.fApi" 
        :rule="form.rule" 
        :option="form.option" />
        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="form.visible = false">取 消</el-button>
          <el-button size="small" type="primary" @click="onFormSubmit">保存</el-button>
        </div>
      </el-dialog>
      </div>
    </div>
  </template>
  
  <script>
  import { PARAMS_SUBPACKAGE,FORM_SUBPACKAGE,LABEL_SUBPACKAGE,OPTION_BLOCK,OPTION_INLINE} from "./labourModel/labour_form"
  import labourList from "./labourModel/labour_model_list"
  import {getLabourList,saveLabourSave,delLabour} from "@/api/labour_api"
  export default {
    components:{
        labourList
    },
    data() {
      return {
        keys:0,
        params:{
          fApi:{},
          rule:PARAMS_SUBPACKAGE,
          option:OPTION_INLINE
        },
        tables:{
          total:0,
          width:'150',
          tableData:[],
          tableLabel: LABEL_SUBPACKAGE
        },
        form:{
          id:'',
          title:'新增',
          width:"500px",
          visible:false,
          fApi:{},
          rule:[],
          option:OPTION_BLOCK
        },
        page:{
          pageNum:1,
          pageSize:10,
        }
      };
    },
    mounted() {
      this.loadList(true);
      this.$nextTick(()=>{
        this.params.fApi.setValue({"name":""});
      })
    },
    methods: {
      async loadList(formData) {
        let params = {};
        let query = this.params.fApi.bind();
        params.name = query.name;
        if(formData !== undefined && formData.type === 'page'){
          this.page.pageNum = formData.pageNum;
          this.page.pageSize = formData.pageSize;
        }
        if(formData===true){
          this.page.pageNum = 1;
          this.keys++;
        }
        params.type=1;
        params.pageNum = this.page.pageNum;
        params.pageSize = this.page.pageSize;
        const req = await getLabourList(params);
        this.tables.tableData = req.data.list;
        this.tables.tableData.forEach(v=>{
          v.edit=true;v.del=true;
        })
        this.tables.total = req.data.total;
      },
      
      add(row){
        this.form.rule = FORM_SUBPACKAGE;
        this.$nextTick(()=>{
          if(row === true){
            this.form.title = "新增";
            this.form.id = "";
            this.form.fApi.resetFields();
          }else{
            this.form.title = "编辑";
            this.form.id = row.id;
            this.form.fApi.setValue({
              "name":row.name,
              "contactPhone":row.contactPhone,
              "mainBusiness":row.mainBusiness
            })
          }
        })
        this.form.visible = true;
      },
      async onFormSubmit(formData) {
        this.form.fApi.submit(async (formData, $f) => {
          try {
            let text = "新增成功";
            if(this.form.id){
              formData.id = this.form.id;
              text = "修改成功"
            }
            formData.type = 1;
            await saveLabourSave(formData);
            this.$message.success(text);
            this.form.visible = false;
            this.loadList();
          } catch (error) {
            //this.$message.info(JSON.stringify(error));
          }
        })
      },
      del(row){
        this.$confirm("确认删除", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(async () => {
          await delLabour(row.id);
          this.$message.success("删除成功");
          this.loadList();
        }).catch(() => {});
      },
      reset(){
        this.params.fApi.resetFields();
        this.loadList(true);
      }
    }
  };
  </script>